<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>心动留言页面</title>
		<link rel="stylesheet" type="text/css" href="css/base.css"/>
		<link rel="stylesheet" type="text/css" href="css/top.css"/>
		<link rel="stylesheet" type="text/css" href="css/floatLogo.css"/>
		<link rel="stylesheet" type="text/css" href="css/通用.css"/>
		<style type="text/css">
			textarea{
				
					width: 475px;
					height: 120px;
					border: 1px solid palevioletred;
					outline: none;
					resize: none ;
				
			}
			.textarea_box{
				height: 600px;
				
			}
			#center{
				margin-left: 100px;
				float: left;
				margin-top: 70px;
				width: 600px;
				height: 400px;
			}
			#speech{
				width: 600px;
				height: 400px;
				font-size: 18px;
				border: 1px solid #868787;
			}
			#comment_box{
				margin-top: 70px;
				margin-left: 100px;
				float: left;
				width: 650px;
				height: 375px;
				
			}
			#comment li a{
				margin-right: 10px;
				text-decoration: underline;
				float: right;
			}
		</style>
	</head>
	<body>
		<img src="img/imgmove.png" width="30px"  style="position: absolute;" id="imgmove">
		<div id="right_float" >
			<a href="index.html"><img src="img/logo.png" ></a>
		</div>
		
		<div id="top">
				<div id="top_center">
					<a href="index.html"><img src="img/logo.png" class="logo" ></a>
					<div class="top_list_box">
						<ul class="top_list">
							<li>
								<a href="index.html">首页</a>
							</li>
							<li>
								<a href="论坛.html">论坛</a>
							</li>
							<li>
								<a href="游戏.html">游戏</a>
							</li>
							<li>
								<a href="加入心动.html">加入心动</a>
							</li>
							<li>
								<a href="家长指引.html">家长指引</a>
							</li>
							<li>
								<a href="#">其他</a>
								<ul>
									<li class="lis"><a href="留言.html">留言</a></li>
									<li class="lis"><a href="pacific.html">太平洋网络</a></li>
								</ul>
							</li>
						</ul>
					</div>
					<div class="search_box">
							<input type="text" name=""  value="" class="search" placeholder="搜索" /><a href=""><img src="img/搜索按钮.png" ></a>
							
					</div>
					<a href="登录.html">登录</a> |
					<a href="注册.html">注册</a>
		</div>
		</div>
		 
		 <div class="textarea_box">
		   
		    <div id="center">
				<div id="" style="height: 50px;background-color: darkorange;">
					<div style="height: 40px;font-size: 18px;float: left;margin-top: 10px;margin-left: 20px;">
						留言页面
					</div>
				</div>
		    	<table border="0" cellspacing="22" cellpadding="0" id="speech">
		    		<tr>
						<td>标题：</td>
						<td><input type="text" name="" id="tit" value="" style="width: 473px;height: 30px;" placeholder="可选填"/></td>
					</tr>
		    		<tr>
						<td>内容：</td>
						<td>
							<textarea rows="" cols="">
							
							</textarea>
						</td>
					</tr>
		    		<tr>
						<td colspan="2" align="right"><input type="button" name="" id="b" value="发言" style="width: 70px;height: 30px;" />
							<input type="button" name="" id="" value="重置" style="width: 70px;height: 30px;"/>
						</td>
						
					</tr>
		    		<tr></tr>
		    		<tr></tr>
		    		
		    	</table>
				
			</div>
			<div id="comment_box">
				<div id="" style="height: 50px;background-color: darkorange;">
					<div style="height: 40px;font-size: 18px;float: left;margin-top: 10px;margin-left: 20px;">
						留言区
					</div>
				</div>
				<div id="speech" style="width: 648px;" >
					<ul id="comment" style="margin-left: 30px;">
						
					</ul>
					</div>
				
				
			</div>
		  </div>
		
		
		
		
		<div class="base">
				<!-- 底部通用于所有网页 -->
				<div id="base_center">
					<table border="0px" cellspacing="20px" cellpadding="5px">
						
						<tr>
							<td>
								<a href="#">免责声明</a> |
								<a href="#">隐私政策</a> |
								<a href="#">用户协议</a> |
								<a href="#">游戏大厅</a> |
								<a href="#">论坛</a>
							</td>
							<td align="right"><img src="img/logo2.png" ></td>
						</tr>
						<tr>
							<td>学号：2403130240</td>
							<td></td>
						</tr>
						<tr>
							<td>姓名：陈奕喧</td>
							<td></td>
						</tr>
						<tr>
							<td>在线客服微信公众号：123456</td>
							<td align="right">河北互联网举报中心</td>
						</tr>
						<tr>
							<td>投诉举报邮箱：tousu@xd.com</td>
							<td align="right">网上有害信息举报专区</td>
						</tr>
					</table>
				</div>
				
			</div>
			<script type="text/javascript">
				//鼠标事件
				var pic=document.getElementById("imgmove");//获取图片对象
				document.addEventListener('mousemove',function(e){//添加鼠标移动事件
					var x=e.pageX||e.clientX+(document.body.scrollLeft||document.documentElement.scrollLeft);//获取鼠标在文档中的x坐标
					var y=e.pageY||e.clientY+(document.body.scrollTop||document.documentElement.scrollTop);//获取鼠标在文档中的y坐标
					pic.style.left=x+2+"px";//第四象限
					pic.style.top=y+2+'px';
				})
				
				
				//留言板
				var b=document.getElementById("b");//发言按钮
				var txt=document.querySelector('textarea');//大文本框
				var c=document.getElementById("comment")//获得ul标签
				var tit=document.getElementById("tit");
				//注册事件
				b.onclick=function(){
					if(txt.value==''){
						alert('您没有输入内容，请输入！！');
						return false;
					}else{
						if(tit.value!=""){
							var li=document.createElement('li');
							li.innerHTML=tit.value+"：<br/>"+txt.value+'<a href="javascript: ;">删除</a>';
							c.insertBefore(li,c.children[0]);
							txt.value='';
							tit.value="";
						}else{
							var li=document.createElement('li');
							li.innerHTML=txt.value+'<a href="javascript: ;">删除</a>';
							c.insertBefore(li,c.children[0]);
							txt.value='';
						}
						
						
						var aa=document.querySelectorAll('a');
						for(var i=0;i<aa.length;i++){
							aa[i].onclick=function(){
								c.removeChild(this.parentNode);
							};
						}
					};
				};
			</script>
	</body>
</html>
